<template>
  <div class="login-container">
    <van-nav-bar class="page-nav-bar" title="登录">
      <template v-slot:left>
        <van-icon name="cross" id="icon" @click="$router.back()"/>
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        v-model="user.mobile"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <template v-slot:left-icon>
          <i class="iconfont icon-shouji"></i>
        </template>
      </van-field>
      <van-field
        name="code"
        label="验证码"
        placeholder="请重新输入验证码"
        v-model="user.code"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <template #left-icon>
          <i class="iconfont icon-yanzhengma"></i>
        </template>
        
        <template #button>
          <van-count-down :time="60 * 1000" format="ss s" v-if="isCountDownShow" @finish = 'isCountDownShow = false'/>
          <van-button 
          size="small" 
          round 
          type="primary" 
          class="send-sms-btn"
          @click="onSendCode"
          native-type="button"
          v-else
            >发送验证码</van-button
          >
        </template></van-field
      >
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login,sendSms } from "@/api/login.js";
export default {
  data() {
    return {
      user: {
        mobile: "18702122906",
        code: "246810", //246810
      },
      userFormRules: {
        mobile: [
          { required: true, message: "请输入手机号码" },
          { pattern: /^1[3/5/7/8]\d{9}$/, message: "手机号格式错误" },
        ],
        code: [
          { required: true, message: "请输入验证码" },
          { pattern: /^\d{6}$/, message: "验证码格式错误" },
        ],
      },
      isCountDownShow:false,
    };
  },
  methods: {
    onSubmit() {
      // this.$toast("成功");
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      login(this.user)
        .then((res) => {
          // console.log(res,'1111');
          if (res.status == 201) {
            let { data } = res;
            this.$store.commit('setUser',data.data)
            this.$toast.success("登录成功");
            setTimeout(()=>{
              this.$router.back()
            },1000)
          }
        })
        .catch((err) => {
          console.log(err);
          if (err.response.status == 400) {
            this.$toast.fail(err.response.data.message);
          } else {
            alert("登录失败");
          }
        });
    },
    async onSendCode(){
      try{
        await this.$refs.loginForm.validate('mobile');
      }catch(err){
        return console.log(err)
      }
      this.isCountDownShow = true;
      sendSms(this.user.mobile).then(res=>{
        // console.log(res,22222);
        if(res.status == 200){
          this.$toast('发送成功')
        }
      }).catch(err=>{
        // 发送失败 关闭倒计时
        // console.log(err)
        this.isCountDownShow = false
        if(err.response.status == 429){
          this.$toast('发送太频繁了,请稍后重试')
        } else {
          this.$toast('发送失败,请稍后重试')
        }
      })
    }
  },
};
</script>

<style lang="less">
.login-container {
  .iconfont {
    font-size: 37px;
  }
  .send-sms-btn {
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
    border: none;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>